<template>
	<el-card shadow="hover" v-if="cardData">
		<!-- 中间 -->
		<n-carousel
			autoplay
			mousewheel
			direction="vertical"
			dot-placement="right"
			trigger="hover"
			style="aspect-ratio: 124/69; font-size: 0"
		>
			<template v-if="cardData.imgFileInfo.length">
				<template v-for="item in cardData.imgFileInfo" :key="item.id">
					<el-image fit="contain" :src="item.storageUrl" class="w100 h100" />
				</template>
			</template>
			<el-image v-else fit="contain" :src="getImgUrl('project/moke.png')" class="w100 h100" />
		</n-carousel>

		<div class="flex m-between s-center m-t-10">
			<el-text truncated>{{ cardData.title }}</el-text>
			<!-- 工具 -->
			<n-space align="center">
				<n-tooltip placement="bottom" trigger="hover" v-for="item in fnBtnList" :key="item.key">
					<template #trigger>
						<el-button size="small" :icon="item.icon" circle plain @click="item.handle" />
					</template>
					{{ item.label }}
				</n-tooltip>
			</n-space>
		</div>
	</el-card>
</template>

<script setup>
const props = defineProps({
		cardData: Object,
		loadFn: Function,
		deleteFn: Function,
		updateFn: Function,
		detailFn: Function
	}),
	fnBtnList = [
		{
			label: '查看资源',
			handle: () => props.detailFn(props.cardData),
			icon: 'FolderOpened'
		},
		{
			label: '修改',
			handle: () => props.updateFn(props.cardData),
			icon: 'Edit'
		},
		{
			label: '删除',
			handle: () => props.deleteFn(props.cardData),
			icon: 'Trash'
		}
		// {
		// 	label: '卸载',
		// 	handle: unloadFn,
		// 	icon: 'FolderDelete'
		// }
	];
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
	padding: 10px;
}
</style>
